<!--
 * @Description: 文创产品页面
 * @Author: Gaq
 * @Date: 2022-10-16 17:13:49
 * @LastEditTime: 2022-11-23 19:57:33
 * @LastEditors: Gaq
-->
<script setup>
import request from "@/utils/request";
import router from "@/router";

const activeName = ref("first");
const input2 = ref("");
const goods = {
  keyword: "",
};
let goodsItem = ref([]);

let introduction = {
  pageSize: 8,
};

let page = ref(1);
// 返回的总数量
let total = ref(0);
const isEmpty = ref(false);
const isLoading = ref(false);

onBeforeMount(() => {
  isLoading.value = true;
  getList(1);
});

const getList = (value) => {
  request
    .post(
      `/goods/getPart?pageNum=${value}&pageSize=${introduction.pageSize}`,
      goods
    )
    .then((res) => {
      if (res.code == -1) {
        isEmpty.value = true;
      } else {
        goodsItem.value = res.data.goodsList;
        total.value = res.data.total;
        isEmpty.value = false;
        isLoading.value = false;
      }
    });
};

const handlePage = computed({
  get(e) {
    return e;
  },
  set(newPage) {
    getList(newPage);
    return newPage;
  },
});

const handicrafts = reactive([
  {
    id: 1,
    title: "皮影",
  },
  {
    id: 2,
    title: "木偶",
  },
  {
    id: 3,
    title: "剪纸",
  },
  {
    id: 4,
    title: "年画",
  },
  {
    id: 5,
    title: "刺绣",
  },
  {
    id: 6,
    title: "宋锦",
  },
  {
    id: 7,
    title: "瓷窑",
  },
  {
    id: 8,
    title: "油纸伞",
  },
  {
    id: 9,
    title: "青花瓷",
  },
  {
    id: 10,
    title: "景泰蓝",
  },
  {
    id: 11,
    title: "长沙棕编",
  },
  {
    id: 12,
    title: "绒花",
  },
]);
const makeProducts = reactive([
  {
    id: 1,
    title: "文具",
  },
  {
    id: 2,
    title: "衣物",
  },
  {
    id: 3,
    title: "装饰品",
  },
  {
    id: 4,
    title: "纪念品",
  },
  {
    id: 5,
    title: "玩具",
  },
  {
    id: 6,
    title: "家纺",
  },
  {
    id: 7,
    title: "餐具",
  },
]);

const key = ref();
const searchGoods = (key) => {
  isLoading.value = true;
  goodsItem.value = [];
  goods.keyword = key;
  getList(1);
};

const getWord = (e) => {
  goods.keyword = e.target.innerHTML;
  getList(1);
};
let clickIndex = reactive({
  indexHand: 0,
  indexMade: 0,
});
const changeStyle = (idHand, idMade) => {
  clickIndex.indexHand = idHand;
  clickIndex.indexMade = idMade;
};

// 跳转商品详情页面
const goDetail = (goodId) => {
  const routeUrl = router.resolve({
    name: "goodsdetail",
    query: { goodId },
  });
  window.open(routeUrl.href, "_blank");
};
const toCollection = () => {
  router.push({ path: "/commonCenter/collection" });
};
const toShoppingCart = () => {
  router.push({ path: "/commonCenter/shopping" });
};
const tomyOrder = () => {
  router.push({ path: `/commonCenter/myOrder/${0}` });
};
</script>

<template>
  <div class="productBox">
    <div class="common-layout">
      <el-container>
        <el-header>
          <div class="header">
            <div class="leftHeader">
              <i-ep-Location />
              <span>河南</span>
              <i-ep-ArrowDown />
            </div>
            <div class="rightHeader">
              <div class="inputSearch">
                <input
                  type="text"
                  placeholder="请输入你想要搜索的内容"
                  v-model="key"
                  @keyup.enter="searchGoods(key)"
                />
                <div class="icon" @click="searchGoods(key)">
                  <i-ep-Search />
                </div>
              </div>
              <section class="config" @click="toCollection">
                <i-ep-Star /> <span>收藏</span>
              </section>
              <section class="config" @click="toShoppingCart">
                <i-ep-ShoppingCart /> <span>购物车</span>
              </section>
              <section class="config" @click="tomyOrder">
                <i-ep-Tickets /> <span>我的订单</span>
              </section>
            </div>
          </div>
        </el-header>
        <el-container>
          <div class="classify">
            <el-aside width="300px">
              <el-tabs v-model="activeName" class="demo-tabs" stretch>
                <el-tab-pane label="手工艺品" name="first">
                  <div style="height: 638px">
                    <el-scrollbar max-height="630px">
                      <p
                        v-for="itemsH in handicrafts"
                        :key="itemsH.id"
                        class="scrollbar-demo-item"
                        :class="
                          clickIndex.indexHand === itemsH.id ? 'active' : ''
                        "
                        @click="getWord($event), changeStyle(itemsH.id, 0)"
                      >
                        {{ itemsH.title }}
                      </p>
                    </el-scrollbar>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="联名产品" name="second">
                  <div style="height: 638px">
                    <el-scrollbar max-height="500px">
                      <p
                        v-for="itemsM in makeProducts"
                        :key="itemsM.id"
                        class="scrollbar-demo-item"
                        :class="
                          clickIndex.indexMade === itemsM.id ? 'active' : ''
                        "
                        @click="getWord($event), changeStyle(0, itemsM.id)"
                      >
                        {{ itemsM.title }}
                      </p>
                    </el-scrollbar>
                  </div></el-tab-pane
                >
              </el-tabs>
            </el-aside>
          </div>
          <el-main>
            <div class="goodsBox" v-show="!isEmpty">
              <span v-show="isLoading" style="font-size: large"
                >加载中......</span
              >
              <div class="goodsList" v-show="goodsItem.length">
                <div
                  class="goodsItem"
                  v-for="(goods, index) in goodsItem"
                  @click="goDetail(goods.goodsId)"
                >
                  <el-card :body-style="{ padding: '0px' }">
                    <img :src="goods.cover" class="image" />
                    <div style="padding: 10px">
                      <span style="color: red; font-size: large"
                        >￥{{ goods.coverPrice }}</span
                      >
                      <div class="bottom">
                        <span>{{ goods.introduction }}</span>
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
              <div class="example-pagination-block" v-show="!isLoading">
                <el-pagination
                  layout="prev, pager, next"
                  v-model:current-page="handlePage"
                  :total="total"
                  hide-on-single-page
                />
              </div>
            </div>
            <div class="empty" v-show="isEmpty">
              <el-empty description="暂时没有您想要的商品~~" />
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<style lang="less" scoped>
.productBox {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  background-color: aliceblue;
  overflow: auto;
}
// 组件样式
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
.example-pagination-block {
  display: flex;
  justify-content: center;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.bottom {
  margin-top: 10px;
  line-height: 15px;
  display: -webkit-box;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  color: rgb(74, 72, 72);
}

.image {
  width: 100%;
  display: block;
}
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
}
.scrollbar-demo-item:hover {
  background-color: #b6dcf5;
}
.active {
  background-color: #b6dcf5;
}

// 分页组件样式

// 自定义样式
.header {
  margin-top: 10px;
  span {
    vertical-align: top;
  }
}
.leftHeader {
  margin-left: 10px;
  display: inline-block;
  span {
    margin-left: 8px;
  }
}
.rightHeader {
  float: right;
  display: flex;
  section {
    margin-right: 30px;
    cursor: pointer;
  }
}
.inputSearch {
  border-radius: 3px;
  height: 30px;
  position: relative;
  border: 1px solid rgb(177, 176, 176);
  display: flex;
  margin-right: 100px;
  width: 250px;
}
.inputSearch:focus-within {
  border: 1px solid #6faad1;
  color: #6faad1;
}
input {
  background-color: transparent;
  caret-color: #6faad1;
  border: none;
  outline: none;
}
.icon {
  top: 20%;
  position: absolute;
  right: 0;
  cursor: pointer;
}
.config:hover {
  color: #6faad1;
}
.classify {
  background-color: rgb(247, 255, 240);
  margin-left: 35px;
  height: 100%;
}
.classifyName {
  margin-top: 20px;
}
.goodsBox {
  background-color: antiquewhite;
}
.goodsList {
  margin-left: 30px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.goodsItem {
  padding: 10px;
  width: 230px;
  height: 310px;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.goodsItem:hover,
.goodsItem:focus,
.goodsItem:active {
  cursor: pointer;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}
.el-pagination {
  text-align: center;
}
</style>